<template>
  <!-- 骨架区域 -->
  <view class="goods-skeleton-wrap" :style="{top: top+'px'}">
    <view class="u-column">
      <view v-for="item in skeletons" :key="item" class="column-item">
        <view class="cover-view skeleton animate-skeleton"></view>
        <view class="content-view">
          <view class="title-view skeleton animate-skeleton" :class="{'title-view-l':item%2==0}"></view>
        </view>
      </view>
    </view>
    <view class="u-column">
      <view v-for="item in skeletons" :key="item" class="column-item">
        <view class="cover-view skeleton animate-skeleton"></view>
        <view class="content-view">
          <view class="title-view skeleton animate-skeleton" :class="{'title-view-l':item%2>0}"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goodsSkeleton',
  props: {
    // 加载骨架图数量
    skeletons: {
      type: Number,
      default: 4
    },
    top: {
      type: [String, Number],
      default: 48
    },
  }
}
</script>

<style lang="scss" scoped>
.goods-skeleton-wrap {
  position: absolute;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 24rpx 12rpx 0;
  background-color: #F7F8FA;
  overflow: hidden;
  .u-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: auto;
  }
  .column-item {
    margin: 0 12rpx 20rpx;
    border-radius: 16rpx;
    //border: 2rpx solid #ffffff;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.12);
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .cover-view {
    height: 340rpx;
  }
  .content-view {
    padding: 16rpx 20rpx;
  }
  .title-view {
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
  }
  .title-view-l {
    height: 40rpx;
  }
  .title-view-r {
    height: 40rpx;
  }
  .skeleton {
    background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
    background-size: 400% 100%;
  }
  .animate-skeleton {
    animation: animate-skeleton 1.2s ease infinite
  }
}
@keyframes animate-skeleton {
  0% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0 50%
  }
}
</style>
